<template>
	<view class="myBox" style="height:100vh;display: flex;flex-direction: column;">
		<view class="topTwo">
			<image :src="httpUrl+'/app/file/viewFile?fileId='+userInfo?.appUser?.avatarId" style="width:90rpx;height:90rpx;margin: 0 10rpx 0 32rpx;border-radius: 50rpx;" mode="aspectFill">
			</image>
			<view style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
				<view style="display: flex;justify-content:center;align-items: center;">
					<view class="userName"> {{userInfo?.appUser?.userName.length>10?userInfo?.appUser?.userName.slice(0,10)+'...':userInfo?.appUser?.userName}}</view>
					<image v-if="userInfo?.partnerLevel?.level==1" @tap="toNoble" src="@/static/icons/my/partner1.png" style="width:40rpx;height:40rpx;margin: 0 6rpx  0 20rpx;"></image>
					<image v-else-if="userInfo?.partnerLevel?.level==2" @tap="toNoble" src="@/static/icons/my/partner2.png" style="width:40rpx;height:40rpx;margin: 0 6rpx 0 20rpx;"> </image>
					<image v-else-if="userInfo?.partnerLevel?.level==3" @tap="toNoble" src="@/static/icons/my/partner3.png" style="width:40rpx;height:40rpx;margin: 0 6rpx 0 20rpx;"> </image>

					<image v-if="userInfo?.vipFlag=='Y'" @tap="toVip" src="@/static/icons/my/vip.png" style="width:40rpx;height:40rpx;margin: 0 6rpx  0 20rpx;"></image>

					<view class="erweima">
						<image @tap="navErweima" src="/static/icons/my/qrcode.png" mode="widthFix"></image>
					</view>

					<image src="@/static/icons/my/config.png" style="width:40rpx;height:40rpx; margin: 0 6rpx  0 20rpx;" @tap="toSetUp">
					</image>

				</view>
				<view class="topId1" @tap="copyInviteCode">
					<text style="color: #8C8C8C;font-size: 28rpx;font-weight: bold;">邀请码</text>
					&nbsp;{{userInfo?.appUser?.inviteCode}}
				</view>
			</view>
		</view>
		<view style="flex: 1;overflow: auto;">
			<view class="renzheng">
				<view @tap="toUserStoreZhizhi" class="renzhengImg" style="width: 200rpx;background: url('../../static/img/zhizhizhzi.png') no-repeat;background-size: cover;">
					<view class="renzhengText" style="color: #6b64d3;margin-left: 91rpx;text-align: center;line-height: 48rpx;">
						{{userInfo?.appUser?.flagQualifications?.name}}
					</view>
				</view>

				<view class="renzhengImg" style="background: url('../../static/img/xinyongfen2.png') no-repeat;background-size: cover;">
					<view class="renzhengText" style="color: #40afff;;margin-left: 91rpx;text-align: center;line-height: 48rpx;">
						{{userInfo?.appUser?.credit}}
					</view>
				</view>

				<view @tap="toUserBond" class="renzhengImg" style="background: url('../../static/img/baozhengjin2.png') no-repeat;background-size: cover;">
					<view class="renzhengText" style="color: #ffcc40;;margin-left: 91rpx;text-align: center;line-height: 48rpx;">
						{{userInfo?.appUser?.bondBalance>=10000?Math.floor(userInfo?.appUser?.bondBalance/10000)+'万+':userInfo?.appUser?.bondBalance}}
					</view>
				</view>
			</view>

			<view class="gerenData">
				<view class="followItem" style='border-right: 1px solid #E5E5E5;'>
					<view class="titleAlign">
						<view style="color: #262626;font-size: 32rpx;font-weight: bold;">
							{{userInfo?.appUser?.praiseCount}}
						</view>
						<view style="color: #8C8C8C;font-size: 24rpx;">点赞</view>
					</view>
				</view>
				<view class="followItem" style='border-right: 1px solid #E5E5E5;' @tap="skipFollowInterest">
					<view class="titleAlign">
						<view style="color: #262626;font-size: 32rpx;font-weight: bold;">
							{{userInfo?.appUser?.followCount}}
						</view>
						<view style="color: #8C8C8C;font-size: 24rpx;">我的关注</view>
					</view>
				</view>
				<view class="followItem" @tap="skipFans">
					<view class="titleAlign">
						<view style="color: #262626;font-size: 32rpx;font-weight: bold;">
							{{userInfo?.appUser?.fansCount}}
						</view>
						<view style="color: #8C8C8C;font-size: 24rpx;">我的粉丝</view>
					</view>
				</view>
			</view>

			<view class="content">
				<view class='contentList'>
					<view class="listItem" @tap="jumpQb">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-wallet-48.png" class="imgDx"></image>
							<text class="textItem">我的钱包</text>
						</view>
						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="listItem" @tap="shareToFriend">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-share-48.png" class="imgDx"></image>
							<text class="textItem">邀请好友</text>
						</view>

						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="listItem" @tap="openInviteCode" v-if="userInfo?.appUser?.parentId==0">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-edit-row-40.png" class="imgDx"></image>
							<text class="textItem">填写邀请码</text>
						</view>
						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="bottomRadio"></view>
					<view class="listItem" @tap="jumpToUserQiangQiang">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-photo-40.png" class="imgDx"></image>
							<text class="textItem">我的墙墙</text>
						</view>
						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="bottomRadio"></view>

					<!-- <view class="listItem" @tap="skipInteraction">
						<view style="display: flex;align-items: center;">
							<image src="@/static/img/hudong.png" class="imgDx"></image>
							<text class="textItem">互动中心</text>
						</view>
						<image style="width: 28rpx;height: 28rpx;margin-right: 32rpx;" src="../../static/img/chevronRight.png"></image>
						<view style="width: 80%;height: 2rpx;background:#EFEFEF ;left: 10%;bottom: 0;position: absolute;">
						</view>
					</view> -->

					<view class="listItem" @tap="skipHelpGroup">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-customer-service-40.png" class="imgDx"></image>
							<text class="textItem">帮助中心</text>
						</view>
						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="bottomRadio"></view>
					<view class="listItem" @tap="anmoshi">
						<view style="display: flex;align-items: center;">
							<image src="/static/icons/my/icons8-timesheet-40.png" class="imgDx"></image>
							<text class="textItem">安全模式</text>
						</view>
						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="bottomRadio"></view>

					<view class="listItem" @tap="toFriend">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-to-do-40.png" class="imgDx"></image>
							<text class="textItem">好友列表</text>
						</view>
						<uni-icons type="right" color="#c2c2c2" size="25"></uni-icons>
					</view>
					<view class="bottomRadio"></view>

					<view class="listItem" v-if="userInfo?.appUser?.parentId>0">
						<view style="display: flex;align-items: center;">
							<image src="@/static/icons/my/icons8-user-location-40.png" class="imgDx"></image>
							<text class="textInviter">邀请人</text>
							<text class="textInviterName">{{userInfo?.inviteUserName}} </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog mode="input" title="填写邀请码" value="" placeholder="填写邀请人邀请码，绑定一次无法修改" @confirm="confirmInviteCode"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { queryUserInfo, updateAutograph, myStoreSimpleInfo, hasQiangQiang, userOrderStatics, queryVpsOrderCount, queryWorkOrderCount, loginCheck } from '@/utils/api/userInfo.ts'
	import { getLogUrl, fillShareCode } from '@/utils/api/index.ts'
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useCounterStore } from '@/stores/counter';
	const httpUrl = getApp().globalData.baseUrl
	const userInfo = ref()
	const autograph = ref('')
	const edit = ref(false)
	const shareCode = ref('')
	const inputDialog = ref<InstanceType<typeof Popup> | null>(null);
	const confirm = async () => {
		if (edit.value) {
			edit.value = false
			await updateAutograph({ data: { autograph: autograph.value } })
			doQueryUserInfo()
		}
	}
	const toSetUp = () => {
		uni.navigateTo({
			url: '/pages/my/setUp'
		})
	}

	const toOrder = () => {
		uni.navigateTo({
			url: '/pages/life/index?type=1'
		})
	}

	const toVpsOrder = () => {
		uni.navigateTo({
			url: '/pages/demandOrder/index'
		})
	}

	const toWorkOrder = () => {
		uni.navigateTo({
			url: '/pages/myParttimeJob/myParttimeJob'
		})
	}

	const anmoshi = () => {
		uni.navigateTo({
			url: '/pages/safeMode/index'
		})
	}
	// 初级合伙人
	const toPrimary = () => {
		uni.navigateTo({
			url: '/pages/my/primary'
		})
	}
	// 天使合伙人
	const toAngel = () => {
		uni.navigateTo({
			url: '/pages/my/angel'
		})
	}
	const jumpQb = () => {
		uni.navigateTo({
			url: '/pages/purse/purse?isNav=true'
		})
	}
	// 尊享合伙人
	const toNoble = () => {
		uni.navigateTo({
			url: '/pages/my/noble'
		})
	}
	//尊享服务
	const toVip = () => {
		uni.navigateTo({
			url: '/pages/homeServer/openMembership/index'
		})
	}
	//分享好友
	const shareToFriend = () => {
		uni.navigateTo({
			url: '/pages/addFriends/shareToFriends'
		})
	}
	//邀请好友-微信
	const navErweima = () => {
		uni.navigateTo({
			url: '/pages/addFriends/index'
		})
	}
	// const skipWall = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/my/wall'
	// 	})
	// }

	const toUserStoreZhizhi = () => {
		if (userInfo.value?.appUser?.flagQualifications?.value == 'Y') {

			myStoreSimpleInfo().then(res => {
				const flag = res.data?.mainType?.value == 'COMPANY'
				if (flag) {
					uni.navigateTo({
						url: '/pages/qualificationInformationShop/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/identityAuthentication/authenticationInfo'
					})
				}
			})
		}
	}

	// 保证金
	const toUserBond = () => {
		uni.navigateTo({
			url: '/pages/bond/index'
		})
	}


	const skipInteraction = () => {
		uni.navigateTo({
			url: '/pages/my/interactionCenter'
		})
	}


	const skipHelpGroup = () => {
		uni.navigateTo({
			url: '/pages/my/helpGroupCenter'
		})
	}

	const skipPrivacyPolicy = () => {
		uni.navigateTo({
			url: '/pages/my/privacyPolicy'
		})
	}
	const toFriend = async () => {
		await getApp().globalData.getUserInfo()
		uni.navigateTo({
			url: '/pages/TUIKit/components/TUIContact/index'
		})
	}
	const skipSafeMode = () => {
		uni.navigateTo({
			url: '/pages/my/safeMode'
		})
	}

	const skipSuggestion = () => {
		uni.navigateTo({
			url: '/pages/my/suggestion'
		})
	}

	const skipFollowInterest = () => {
		uni.navigateTo({
			url: '/pages/my/followInterest'
		})
	}

	const skipFans = () => {
		uni.navigateTo({
			url: '/pages/my/fans'
		})
	}

	const jumpToUserQiangQiang = () => {
		hasQiangQiang().then(res => {
			const flag = res.data == 'Y'
			if (!flag) {
				uni.showModal({
					title: '提示',
					content: '暂无墙墙,是否立即发布墙墙?',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/release/release'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				return
			}
			const userLocalId = userInfo?.value?.appUser?.id
			uni.navigateTo({
				url: `/pages/qiangqiang/user?userId=${userLocalId}&areaType=NATIONAL&come=1&isTimer=1`
			})
		})

	}


	const doQueryUserInfo = async () => {
		const userRes = await queryUserInfo()
		userInfo.value = userRes.data
		autograph.value = userRes.data?.appUser?.autograph
		uni.setStorageSync('userName', userInfo.value?.appUser?.userName)
		uni.setStorageSync('avatarId', userInfo.value?.appUser?.avatarId)
		uni.setStorageSync('userId', userInfo.value?.appUser?.id)
	}
	// 分享
	const share = async () => {
		uni.showLoading({
			title: '请稍后...'
		})
		const res = await getLogUrl()
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 0,
			href: "http://im.yiquduozi.top/#/?shareCode=" + userInfo.value?.appUser?.inviteCode,
			title: "宜趣多资",
			summary: "我正在使用宜趣多资，赶紧跟我一起来体验！",
			imageUrl: res.data,
			success: function (res) {
				console.log("success:" + JSON.stringify(res));
				uni.hideLoading()
			},
			fail: function (err) {
				console.log("fail:" + JSON.stringify(err));
				uni.hideLoading()
			}
		});
		uni.hideLoading()
	}

	function openInviteCode() {
		inputDialog.value.open()
	}

	function confirmInviteCode(val) {
		fillShareCode({ data: { shareCode: val } }).then(res => {
			setTimeout(() => {
				uni.showToast({
					title: '填写成功!',
					icon: 'success'
				});
			}, 500)
			inputDialog.value.close()
			doQueryUserInfo()
		})
	}

	function showMyShareCode() {
		uni.showModal({
			title: '我的邀请码:' + userInfo.value.appUser?.inviteCode + ",快点复制分享给好友吧!"
		})

	}
	function copyInviteCode() {
		uni.setClipboardData({
			data: userInfo.value?.appUser?.inviteCode,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		});

	}
	const counterStore = useCounterStore();

	const orderObj = ref({})
	function loadOrderObj() {
		userOrderStatics().then(res => {
			orderObj.value = res.data
		})
	}

	const vpsOrderCount = ref({})
	const loadVpsOrderCount = async () => {
		queryVpsOrderCount().then(res => {
			vpsOrderCount.value = res.data
		})
	}
	const workOrderCount = ref({})
	const loadWorkOrderCount = async () => {
		queryWorkOrderCount().then(res => {
			workOrderCount.value = res.data
		})
	}
	onShow(() => {
		counterStore.resetCountdowns()
		loginCheck().then(res => {
			doQueryUserInfo()
			loadOrderObj()
			loadVpsOrderCount()
			loadWorkOrderCount()
		})
	})
</script>

<style lang="scss" scoped>
	.erweima {
		&:before {
			content: '';
			display: inline-block;
			margin: 0 15rpx;
			width: 2rpx;
			background: #BFBFBF;
			height: 20rpx;
		}

		display: flex;
		align-items: center;

		image {
			width: 35rpx;
		}

		// &:after{
		// 	content: '';
		// 	display: inline-block;
		// 	margin: 0 15rpx 0 15rpx;
		// 	width: 2rpx;
		// 	background: #BFBFBF;
		// 	height: 20rpx;
		// }
	}

	.myBox {
		background: url("@/static/img/wode.png");
		width: 750rpx;
		// height: 610rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 75rpx;
	}

	.top {}

	.topTwo {
		display: flex;
		align-items: center;
		padding: var(--status-bar-height) 1vh 0 0;
		// padding-top: 20px;
		position: relative;
	}

	.userName {
		height: 50rpx;
		font-weight: 700;
		font-size: 30rpx;
		color: #262626;
		line-height: 54rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.topId {
		display: flex;
		align-items: center;
		margin: 16rpx 0 32rpx 66rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 28rpx;
		color: #8C8C8C;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.topId1 {
		display: flex;
		align-items: center;
		margin-top: 1vh;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 28rpx;
		color: #8C8C8C;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.renzheng {
		width: 702rpx;
		height: 82rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 12rpx 24rpx 12rpx 24rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.renzhengImg {
		width: 200rpx;
		height: 48rpx;
	}

	.order {
		margin: 12rpx 24rpx;
		width: 702rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.title {
			padding: 10rpx 0 30rpx 44rpx;
		}

		.orderData {
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-self: center;
			position: relative;
			z-index: 20;

			.titleAlign {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.imgDxs {
				width: 48rpx;
				height: 48rpx;
				width: 100%;
				text-align: center;
			}

			.followItem {
				justify-content: center;
				align-self: center;
				width: 30vw;
			}
		}
	}

	.gerenData {
		margin: 18rpx 24rpx;
		width: 702rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: center;
		align-self: center;
		position: relative;
		z-index: 20;

		.titleAlign {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.followItem {
			display: flex;
			justify-content: center;
			align-self: center;
			font-size: 38rpx;
			width: 30vw;
		}
	}

	.content {
		// margin: 12rpx 24rpx;
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 0 32rpx;
		overflow-y: hidden;
		padding-bottom: 40rpx;
	}

	.listItem {
		height: 96rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imgDx {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.textItem {
		width: 272rpx;
		height: 39rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none
	}

	.textInviter {
		width: 130rpx;
		height: 39rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		text-transform: none
	}

	.textInviterName {
		height: 39rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none
	}

	.bottomRadio {
		margin: 0 50rpx;
		width: 558rpx;
		height: 2rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 1rpx solid #EFEFEF;
	}
</style>